<template>
  <div class="housejob">
    <van-nav-bar
      left-text="入驻商务部"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
      :border="false"
    ></van-nav-bar>

    <van-card class="jobsinfo">
      <template #tags>
        <div class="content">
          <div class="contents">
            <div class="contop">
              <van-row type="flex">
                <van-col>
                  <div class="contops"></div>
                </van-col>
                <van-col>
                  <span>企业资料</span>
                </van-col>
              </van-row>
            </div>
            <van-form ref="loginForm">
              <van-cell-group>
                <van-field
                  v-model="company.stiftung"
                  label="*法人类型："
                  placeholder="请输入企业法人"
                  clearable
                  required
                  :rules="rules.stiftung"
                ></van-field>
                <van-field
                  v-model="company.name"
                  type="text"
                  label="*企业名称："
                  placeholder="请输入企业名称："
                >
                </van-field>
                <van-field
                  v-model="company.showname"
                  type="text"
                  label="*显示名称："
                  placeholder="企业名称："
                  clearable
                >
                </van-field>
                <van-field
                  v-model="company.creditName"
                  type="number"
                  label="*社会信用代码："
                  placeholder="请输入18位统一社会信用"
                  clearable
                >
                </van-field>

                <van-field
                  v-model="company.registTime"
                  type="text"
                  label="*注册时间："
                  placeholder="请选择工商注册时间"
                  clearable
                  @click="showPickerDate = true"
                ></van-field>

                <van-field
                  v-model="company.registCapital"
                  type="text"
                  label="*注册资本 (万元)："
                ></van-field>

                <van-field
                  v-model="company.registAdd"
                  type="text"
                  label="*注册地区："
                  center
                ></van-field>
                <van-field
                  v-model="company.firmType"
                  type="text"
                  label="*企业类型："
                  clearable
                  center
                ></van-field>
                <van-cell class="wantjob">
                  <span>*主营业务：</span><br />
                  <van-row type="flex">
                    <div
                      class="jobs"
                      v-for="(item, index) in jobinfo"
                      :key="index"
                      @click="post(index)"
                    >
                      <span> {{ item }}</span>
                    </div>
                  </van-row>
                </van-cell>
              </van-cell-group>
            </van-form>
          </div>
          <van-divider />
        </div>
      </template>
    </van-card>
    <van-button
      @click="btnOK"
      class="bottombutton"
      type="primary"
      size="large"
      block
      >提交资料</van-button
    >
    <van-popup
      v-model="showPickerDate"
      position="bottom"
      :style="{ height: '50%' }"
    >
      <van-datetime-picker
        v-model="currentDate"
        type="date"
        title="选择年月日"
        :min-date="minDate"
        @cancel="showPickerDate = false"
        @confirm="onConfirm"
      />
    </van-popup>
  </div>
</template>

<script>
import { getjob, postcompanys } from "@/api/user";
import dayjs from "dayjs";
export default {
  props: {
    showaddlog: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      minDate: new Date(1949, 10, 1),
      currentDate: new Date(2021, 0, 17),
      showPickerDate: false,
      company: {
        name: "",
        stiftung: "",
        salary: "",
        showname: "",
        creditName: "",
        registime: "2016-06-23",
        registCapital: "50万",
        registAdd: "",
        firmType: "家政服务",
        mainBusiness: this.jobinfo
      },
      rules: {
        stiftung: [
          {
            required: true,
            messsage: "企业法人不能为空"
          }
        ],
        name: [
          {
            required: true,
            messsage: "企业名称不能为空"
          }
        ]
      },
      jobinfo: []
    };
  },
  created() {
    this.gethousejob();
  },
  methods: {
    async gethousejob() {
      const { data } = await getjob();
      this.jobinfo = data[0].Mainbusiness;
    },
    onClickLeft() {
      this.$emit("update:showaddlog", false);
    },
    onClickRight() {},
    post(id) {
      console.log(id);
    },
    onConfirm() {
      this.company.registTime = dayjs(this.currentDate).format("YYYY-MM-DD");
      this.showPickerDate = false;
    },
    async btnOK() {
      const firm = {
        creditname: this.company.creditName,
        declaration: "您的笑容，我们的追求",
        firmphoto: [
          "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1285747368,772661861&fm=26&gp=0.jpg"
        ],
        firmtype: this.company.firmType,
        mainbusiness: this.company.mainBusiness,
        name: this.company.name,
        registadd: this.company.registAdd,
        registcapital: this.company.registCapital,
        registtime: this.company.registTime,
        servicearea: "",
        showname: this.company.showname,
        stiftung: this.company.stiftung,
        image:
          "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fbk.hr1000.com%2Fupimages%2Fcompic%2F20145811743.jpg&refer=http%3A%2F%2Fbk.hr1000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1622506212&t=0bc9f2ed44c75c988087278b2c2dfee1",
        distance: "20km",
        adress: "湖南省长沙市岳麓区麓谷企业广场5楼",
        options: ["协会成员", "服务好", "环境优美", "办公舒适", "气氛好"]
      };
      await postcompanys(firm);
      this.$toast("入驻商务部添加成功");
      this.$emit("update:showaddlog", false);
    }
  }
};
</script>

<style lang="scss" scoped>
.housejob {
  position: relative;
  height: 1390px;
  width: 750px;
  background-color: rgba(248, 248, 248, 100);
  ::v-deep.van-nav-bar {
    height: 180px;
    background-color: #3f51b5;
    .van-nav-bar__content {
      padding-top: 50px;
    }
    .van-nav-bar__left {
      font-size: 33px;
      .van-icon {
        color: rgba(255, 255, 255, 100);
      }
      .van-nav-bar__text {
        color: rgba(255, 255, 255, 100);
      }
    }
  }
  .jobsinfo {
    height: 1212px;
    width: 704px;
    margin: 0 0 0 24px;
    border-radius: 8px 8px 8px 8px;
    padding: 0;
    z-index: 10;
    position: absolute;
    background-color: rgba(255, 255, 255, 100);
    bottom: 50px;

    .content {
      padding: 0;
    }
  }
  .content {
    padding: 0 42px;
    background-color: rgba(248, 248, 248, 100);

    .contents {
      background-color: rgba(255, 255, 255, 100);
      border-radius: 8px 8px 8px 8px;
      color: rgba(16, 16, 16, 100);
      text-align: center;
      font-family: Arial;

      .contop {
        height: 110px;
        line-height: 110px;
        color: rgba(16, 16, 16, 100);
        font-size: 28px;
        font-family: PingFangSC-regular;
        font-weight: bold;
        .contops {
          width: 8px;
          height: 28px;
          margin: 43px 20px 0 25px;
          background-color: rgba(63, 81, 181, 100);
        }
      }
      .wantjob {
        color: rgba(16, 16, 16, 100);
        height: 256px;
        .jobs {
          padding: 1px 15px 0 15px;
          border: 2px solid rgba(151, 145, 145, 100);
          border-radius: 28px 28px 28px 28px;
          text-align: center;
          margin-left: 13px;
          margin-top: 28px;
          &:hover {
            border: 2px solid rgba(63, 81, 181, 100);
          }
          span {
            font-size: 10px;
            &:hover {
              color: rgba(63, 81, 181, 100);
            }
          }
        }
      }
      .companysinfo {
        position: relative;
        .selectcol {
          position: absolute;
          top: 0;
          right: 0;
          select {
            width: 160px;
            font-size: 13px;
            border: 0;
            outline: none;
          }
        }
      }
    }
    .van-divider {
      margin: 0;
    }
  }
  .bottombutton {
    background-color: rgba(63, 81, 181, 100);
    font-size: 28px;
    margin-top: 100px;
    position: absolute;
    z-index: 12;
    bottom: 0;
  }
  .homebtn {
    border-radius: 28px 28px 28px 28px;
    border: 2px solid rgba(151, 145, 145, 100);
    color: rgba(151, 145, 145, 100);
    font-size: 20px;
    margin-left: 16px;
  }
}
</style>
